class Fire {
	constructor(options = {}) {
		// 设置天空的大小
		this.sky = null;
		this.skyWidth = options.skyWidth || 800;
		this.skyHeight = options.skyHeight || 600;
		this.skyColor = options.skyColor || getColor();
		// 设置烟花的大小
		this.fireWidth = options.fireWidth || 20;
		this.fireHeight = options.fireHeight || 20;
		this.init();
	}
	// 初始化天空
	init() {
		const sky = document.createElement("div");
		css(sky, "width", this.skyWidth + "px");
		css(sky, "height", this.skyHeight + "px");
		css(sky, "backgroundColor", this.skyColor);
		css(sky, "margin", "50px auto");
		css(sky, "position", "relative");
		// 将sky加到页面上
		document.body.appendChild(sky);
		this.sky = sky;
		this.bindEvent();
	}
	bindEvent() {
		on(this.sky, "click", (e) => {
			// 获取点击的位置
			const _x = e.offsetX;
			const _y = e.offsetY;
			// 调用创建烟花的函数
			this.createFire(_x, _y);
		});
	}
	createFire(x, y) {
		// 创建炮弹p
		const p = document.createElement("p");
		// 设置炮弹的样式
		css(p, "width", this.fireWidth + "px");
		css(p, "height", this.fireHeight + "px");
		css(p, "position", "absolute");
		css(p, "top", this.skyHeight - this.fireHeight + "px");
		css(p, "left", x + "px");
		css(p, "backgroundColor", getColor());
		// 将炮弹添加到sky
		this.sky.appendChild(p);
		this.fireUp(x, y, p);
	}
	fireUp(x, y, fire) {
		// 烟花升起
		animate(fire, {
			top: y
		}, 500, () => {
			this.sky.removeChild(fire);
			this.creatEles(x, y);
		});
	}
	creatEles(x, y) {
		// 创建多个p
		const count = getRandom(20, 30);
		// 创建一个数组保存元素
		const arr = [];
		// 给每个p设置样式
		for (let i = 0; i < count; i++) {
			const ele = document.createElement("p");
			css(ele, "width", this.fireWidth + "px");
			css(ele, "height", this.fireHeight + "px");
			css(ele, "backgroundColor", getColor());
			css(ele, "position", "absolute");
			css(ele, "borderRadius", "50%");
			css(ele, "top", y + "px");
			css(ele, "left", x + "px");
			arr.push(ele);
			this.sky.appendChild(ele);
		}
		this.boom(arr);
	}
	boom(arr){
		arr.forEach(item =>{
			animate(item,{left:getRandom(0,this.skyWidth),top:getRandom(0,this.skyHeight)},500,()=>{
				this.sky.removeChild(item);
			})
		});
	}
}
